<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <tree></tree>
            </el-aside>
            <el-main height="">
                <div class="title-warp">
                    <el-row :gutter="20">
                        <el-col :span="4" :offset="1">
                            <div class="title-warp-box">
                                <el-image
                                    :src="require('@/assets/scene/all.png')"
                                    fit="fill"
                                ></el-image>
                                全部
                            </div>
                            <div class="num">104</div>
                        </el-col>
                        <el-col :span="4" :offset="1">
                            <div class="title-warp-box">
                                <el-image
                                    :src="require('@/assets/scene/powerOn.png')"
                                    fit="fill"
                                ></el-image>
                                开机
                            </div>
                            <div class="num">104</div>
                        </el-col>
                        <el-col :span="4" :offset="1">
                            <div class="title-warp-box">
                                <el-image
                                    :src="
                                        require('@/assets/scene/powerOff.png')
                                    "
                                    fit="fill"
                                ></el-image>
                                关机
                            </div>
                            <div class="num">104</div>
                        </el-col>
                        <el-col :span="4" :offset="1">
                            <div class="title-warp-box">
                                <el-image
                                    :src="
                                        require('@/assets/scene/communicate.png')
                                    "
                                    fit="fill"
                                ></el-image>
                                通讯异常
                            </div>
                            <div class="num">104</div>
                        </el-col>
                        <el-col :span="4" :offset="0">
                            <div class="title-warp-box">
                                <el-image
                                    :src="
                                        require('@/assets/scene/equipment.png')
                                    "
                                    fit="fill"
                                ></el-image>
                                设备异常
                            </div>
                            <div class="num">104</div>
                        </el-col>
                    </el-row>
                </div>
                <div class="box-warp">
                    <el-popover
                        placement="right"
                        width="200"
                        trigger="click"
                        v-for="(item, index) in 9"
                        :ref="`popover${index}`"
                        :key="item"
                        popper-class="custom-popover"
                    >
                        <controlsPov
                            :index="index"
                            @handleClose="handleShowPov"
                        ></controlsPov>
                        <div slot="reference" class="box-item">
                            <div
                                class="box-item-child"
                                :style="{
                                    border: item % 2 == '0' ? '0px' : '',
                                    backgroundColor:
                                        item % 2 == '0' ? '#cbc8c8' : '',
                                    color: item % 2 == '0' ? '#fff' : '',
                                }"
                            >
                                <div class="child-title">环境：26℃</div>
                                <div
                                    v-if="item % 2 == '0'"
                                    style="margin-top: 15px"
                                >
                                    <el-image
                                        :src="
                                            require('@/assets/scene/关机.png')
                                        "
                                        fit="fill"
                                        style="width: 60px; height: 60px"
                                    ></el-image>
                                </div>
                                <div class="child-cen" v-else>
                                    <div class="child-cen-nth">26</div>
                                    <div class="child-cen-nth">℃</div>
                                    <div class="child-cen-nth">
                                        <el-image
                                            :src="
                                                require('@/assets/scene/snowflake.png')
                                            "
                                            fit="fill"
                                        ></el-image>
                                    </div>
                                </div>
                                <div class="child-cen-btm">
                                    <div>机型：多联机</div>
                                    <div>编号：7-1-16</div>
                                </div>
                            </div>
                        </div>
                    </el-popover>
                </div>
                <div style="text-align: center">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="100"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="params.currentPage"
                        :page-size="params.pageSize"
                    >
                    </el-pagination>
                </div>

                <!-- <div class="box-warp">
                    <div v-for="item in 9" :key="item" class="box-item">
                        <div
                            class="box-item-child"
                            :style="{
                                border: item % 2 == '0' ? '0px' : '',
                                backgroundColor:
                                    item % 2 == '0' ? '#cbc8c8' : '',
                                color: item % 2 == '0' ? '#fff' : '',
                            }"
                        >
                            <div class="child-title">环境：26℃</div>
                            <div
                                v-if="item % 2 == '0'"
                                style="margin-top: 15px"
                            >
                                <el-image
                                    :src="require('@/assets/scene/RedHorn.png')"
                                    fit="fill"
                                    style="width: 60px; height: 60px"
                                ></el-image>
                            </div>
                            <div class="child-cen" v-else>
                                <div class="child-cen-nth">26</div>
                                <div class="child-cen-nth">℃</div>
                                <div class="child-cen-nth">
                                    <el-image
                                        :src="
                                            require('@/assets/scene/RedHorn.png')
                                        "
                                        fit="fill"
                                    ></el-image>
                                </div>
                            </div>
                            <div class="child-cen-btm">
                                <div>机型：多联机</div>
                                <div>编号：7-1-16</div>
                            </div>
                        </div>
                    </div>
                </div> -->
            </el-main>
        </el-container>
    </div>
</template>
<script>
import tree from "./tree.vue";
import controlsPov from "./controlsPov.vue";
export default {
    components: { tree, controlsPov },
    name: "airConditioner",
    data() {
        return {
            params: {
                currentPage: 1,
                pageSize: 10,
            },
        };
    },
    created() {},
    mounted() {},
    methods: {
        handleShowPov(e) {
            console.log(e);
            console.log(this.$refs["popover" + e]);
            this.$refs["popover" + e][0].doClose();
        },
        handleSizeChange(e) {
            console.log(e);
        },
        handleCurrentChange(e) {
            console.log(e);
        },
    },
};
</script>
<style>
.custom-popover {
    display: flex;
}
.el-popover {
    padding: 0px;
    width: 400px !important;
}
</style>
<style lang="scss" scoped>
.el-aside {
    // height: 100vh;
    background-color: #e1e1e1;
    padding: 10px;
    ::v-deep .el-collapse-item__header {
        margin-bottom: 10px;
        border-radius: 10px;
        background-color: #fff;
        border-bottom: 0px;
        padding-left: 10px;
    }
    ::v-deep .el-collapse-item__header.is-active {
        background-color: #54778a;
        border-radius: 10px 10px 0px 0px;
    }
    ::v-deep .el-collapse-item__content {
        background-color: #ededed;
        padding-bottom: 0px;
    }
    ::v-deep .el-collapse-item__wrap {
        margin-bottom: 10px;
        border-bottom: 0px;
        margin-top: -10px;
    }
    ::v-deep .el-collapse {
        border-top: 0px solid #ebeef5;

        border-bottom: 0px solid #ebeef5;
    }
}
.title-warp {
    font-size: 12px;
    .title-warp-box {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }
    .num {
        text-align: center;
    }
    :nth-child(1) {
        .title-warp-box {
            color: #000042;
        }
        .num {
            color: #000042;
        }
    }
    :nth-child(2) {
        .title-warp-box {
            color: #4b7dad;
        }
        .num {
            color: #4b7dad;
        }
    }
    :nth-child(3) {
        .title-warp-box {
            color: #000042;
        }
        .num {
            color: #000042;
        }
    }
    :nth-child(4) {
        .title-warp-box {
            color: #ff9050;
        }
        .num {
            color: #ff9050;
        }
    }
    :nth-child(5) {
        .title-warp-box {
            color: #b64343;
        }
        .num {
            color: #b64343;
        }
    }

    .el-image {
        height: 15px;
        height: 15px;
    }
}
.el-main {
    background-color: #e1e1e1;
}
::v-deep .el-popover {
    padding: 0px;
}
.box-warp {
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* 创建3列 */
    grid-gap: 10px; /* 设置列之间的间距 */
    padding: 10px; /* 设置容器的内边距 */
    .box-item {
        padding: 8px; /* 子元素内边距 */
        // border: 1px #b64343 solid;
        height: 200px;
        background-color: #ededed;
        .box-item-child {
            border: 1px #48c3d9 solid;
            height: 180px;
            border-radius: 8px;
            padding: 10px;
            color: #48c3d9;
            font-size: 12px;
            text-align: center;
            .child-title {
                text-align: center;
            }
            .child-cen {
                margin-top: 30px;
                text-align: center;
                display: flex;
                .child-cen-nth:nth-child(1) {
                    font-size: 36px;
                }
                .child-cen-nth:nth-child(2) {
                    margin: 0 6px;
                }
                .child-cen-nth:nth-child(3) {
                    margin-top: 5px;
                    .el-image {
                        height: 40px;
                        width: 40px;
                    }
                }
                // .el-image {
                //     height: 30px;
                //     width: 30px;
                // }
            }
            .child-cen-btm {
                line-height: 1.5;
                margin-top: 30px;
            }
        }
    }
}
</style>
